define([
    'backbone',
    'models/public/menu',
    'text!templets/public/menuItem.htm'
], function(
    Backbone,
    Model,
    menuTpl
) {
    var view = Backbone.View.extend({
        el: '#MENU',
        events: {
            'click a': 'navigate'
        },
        initialize: function(options) {
            this.options = options;
            $(this.el).undelegate();
            if ($(this.el).html() == '') {
                this.renderMenu();
            } else {
                this.changeStyle();
            }
        },
        renderMenu: function() {
            var _this = this;
            Model.fetchMenu({
                type: 'get',
                success: function(map) {
                    res = _.template(menuTpl, {
                        list: map
                    });
                    $(_this.el).html(res);
                    _this.changeStyle();
                }
            })
        },
        navigate: function(e) {
            var $target = $(e.currentTarget),
                _this = $target.parent('li'),
                _this_ol = _this.find('ol'),
                that = _this.siblings();
            urlData = $target.attr('data-url');
            if (_this.hasClass('on')) {
                if (_this_ol.length) {
                    _this.removeClass('on')
                    _this_ol.slideUp('300')
                }
            } else {
                _this.addClass('on')
                _this_ol.slideDown('300')
            }
            if (urlData) {
                urlData = 'view/' + urlData;
                this.options.router.navigate(urlData, true);
            }
        },
        changeStyle: function() {
            var $menu = $(this.el),
                module = this.options.module;
            switch (module){
                case 'article-add' :
                    module = 'article-list';
                    break;
                case 'article-edit' :
                    module = 'article-list';
                    break;
            }
            var $target = $menu.find("a[data-url='" + module + "']"),
                $li = $target.parent(),
                $ol = $li.parent('ol');
            $menu.find('a').removeClass('on');
            $menu.find('li').removeClass('on');
            $target.addClass('on');
            $li.addClass('on');
            if ($ol.length) {
                var submenuState = $ol.css('display');
                if (submenuState != 'block') {
                    $ol.slideDown('300');
                }
                $ol.parent().addClass('on');
                $ol.parent().siblings().find('ol').slideUp('300');
            } else {
                $menu.find('li').find('ol').slideUp('300');
            }
        }
    });
    return view;
});